 $(function () {
  //  定义全局变量--请求回来的数据
   var Datas;
  //  定义左侧滚动 方便点击置顶方法使用
   var leftScroll;
   init();

   function init() {
     setHTML();
     getcategories();
   }
   // 根据屏幕的宽度动态设置html标签的fontsize
   function setHTML() {
     // 设计的宽度 / 基础值 = 要适配的屏幕的宽度 / fz
     // fz=要适配的屏幕的宽度*基础值/设计的宽度

     // 基础值
     var baseVal = 100;
     // 设计稿的宽度
     var pageWidth = 375;
     // 当前屏幕的宽度
     var screenWidth = document.querySelector("html").offsetWidth;
     // 要设置fontsize
     var fz = screenWidth * baseVal / pageWidth;

     // 赋值给HTML标签
     document.querySelector("html").style.fontSize = fz + "px";
   }
   window.onresize = function () {
     setHTML();
   }
   // 获取左边列表数据
   function getcategories() {
     $.get('categories', function (res) {
       // console.log(res);
       var html = template('leftTpl', {arr: res.data});
       $('.left').html(html);
       // 初始化插件 只有容器元素的第一个子元素可以滚动 其他被忽略
       leftScroll = new IScroll(".left");
        // 将获取的数据赋值给全局变量，便于右侧渲染使用
        Datas=res.data;
        // 右侧数据默认显示大家电
        renderRight(0);

     })
   }
// 定义获取右侧数据函数
function renderRight(index){
    // 获取右侧商品数据--每个存储在children，默认显示第一个
    var arr = Datas[index].children;
    //  console.log(Datas[2].children);
     var html2 = template('rightTpl', { arr: arr});
     $('.right').html(html2);
    //  优化图片缓存，获取有多少张图片
    var nums=$('.right img').length;
    // console.log(nums);
    //  要登图片全部缓存出来才能初始化滚动条-要不是没有高度和优化性能
    $('.right img').on('load',function(){
      nums--;
      if(nums==0){
         // 初始化滚动条
      var rightScroll = new IScroll(".right");
      }
     
    })
}
   // 左侧点击事件--添加类，显示右侧对应的商品
   $('.left').on('tap', 'li', function () {
    //  排他
     $(this).addClass('active').siblings().removeClass('active');
    //  点击显示对应的数据--由隐藏域存值或用自定义属性来存值
    var index=$(this).next("input[name='val']").val();
    // console.log(index);
     // 往上滚动置顶
     leftScroll.scrollToElement(this);
    // 调用函数，渲染右侧数据
    renderRight(index);
   })
 })